<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>店铺管理</BreadcrumbItem>
      <BreadcrumbItem>商品分类</BreadcrumbItem>
      <Button style="float:right" type="primary" @click="openCreateTop">新增</Button>
    </Breadcrumb>
    
    <Content class="layer-content">
      <Table border row-key="categoryId" :columns="columnsVo" :data="dataGrid" :update-show-children="true"></Table>
    </Content>
    <Modal v-model="showCreate" title="新增分类" :footer-hide="true">
      <Create :callbank="eventAction" :key="keyIndex"></Create>
    </Modal>
    <Modal v-model="showUpdate" title="编辑分类" :footer-hide="true">
      <Update :dataBus="category" :callbank="eventAction" :key="keyIndex"></Update>
    </Modal>
  </div>
</template>
<script>
import Create from './create.vue'
import Update from './update.vue'
export default {
  data() {
    return {
      showCreate: false,
      showUpdate: false,
      keyIndex: 1,
      category: {},
      dataGrid: [],
      columnsVo: [
        {
          title: "分类名称",
          key: "categoryName",
          tree: true
        },
        {
          title: "分类编号",
          key: "categoryId",
        },
        {
          title: "上架状态",
          key: "onlineText",
          width: 150,
        },
        {
          title: "排序",
          key: "sortIndex",
          width: 120,
        },
        {
          title: "创建日期",
          key: "postTime",
          width: 150,
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.openUpdate(params.row)}}},"编辑"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.updateStatus(params.row)}}},params.row.onlineStatus===0?'上架':'下架'),
                    h("DropdownItem",{nativeOn:{click:()=>{this.confirmDel(params.row,params.row.children !== undefined)}},props:{disabled: params.row.children !== undefined}},"删除"),
                  ]
                ),
              ]
            )
          }
        }
      ]
    }
  },
  components: {
    Create,
    Update
  },
  methods: {
    eventAction() {
      this.showCreate = false
      this.showUpdate = false
      this.keyIndex ++
      this.Init()
    },
    openCreateTop() {
      this.keyIndex ++
      this.showCreate = true
    },
    openUpdate(item) {
      this.showUpdate = true
      this.category = item
    },
    confirmDel(item,bool) {
      if(bool){
        return false
      }
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确认删除【${item.categoryName}】`,
        onOk: ()=>{
          new this.$rest({
            gateway: 'agroerp',
            service: "agroerp-shop",
            url: "/v1.0/shop/category",
            data: {
              pojo: [item.categoryId]
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$Message.success({
                  content: '删除成功'
                })
                this.Init()
              } else {
                this.$Message.error(res.data.msg)
              }
            },
          }).delete()
        }
      })
    },
    Init() {
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/shop/category/page",
        query:{
          equal:{
            shopId: this.$store.getShop('shopId')
          },
          pageIndex: 1,
          pageSize: 50
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.postTime = this.$date(item.postTime,'yyyy-MM-dd')
              item.onlineText = item.onlineStatus === 0 ? '下架' : '上架'
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    updateStatus(item) {
      let status = item.onlineStatus === 0 ? 1 : 0
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/shop/category",
        data: {
          pojo: {
            shopCategoryId: item.shopCategoryId,
            onlineStatus: status
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '操作成功'
            })
            this.Init()
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).put()
    }
  },
  created() {
    this.Init()
  }
};
</script>